<template>
	<view class="content">
	<view class="search-box" @click="search">
		<view class="category-search">
			<image src="/static/index-search.png" class="category-search-img"></image>
			<text class="category-search-text1">|</text>
			<text class="category-search-text"></text>
			<input type="text" :value="val"  class="category-search-input" placeholder="请输入" @confirm="show"/>
		</view>
	</view>
	<!-- 热门搜索 -->
	<view class="search-keyword"  :class="bolShow?'none':'block'">
				<view class="leftBorder"></view>
				<text class="search-title">热门推荐</text>
				<view class="search-list" v-for="item in searchData" :key="item.id" >
					<text class="search-list-text" @click="addSearch" :data-a="item.name">{{item.name}}</text>
					<text class="clear"></text>
				</view>
			 </view>
			 	 <!-- 查询内容 -->
				 <view class="result" :class="bolShow?'block':'none'">
				 	<view class="navbar" :style="{position:headerPosition,top:headerTop}">
				 				<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				 					综合排序
				 				</view>
				 				<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
				 					销量优先
				 				</view>
				 				<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
				 					<text>价格</text>
				 					<view class="p-box">
				 						<text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
				 						<text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
				 					</view>
				 				</view>
				 			</view>
				 			
				 			<!-- 商品列表 -->
				 			<view class="goods-list">
				 				<view v-for="(item, index) in goodsList" :key="index"
				 					class="goods-item"
				 					
				 					>
				 					  <view class="image-item-left"  @click="navToDetailPage(item)">
				 						  <image :src="item.cover_pic" mode="aspectFill"></image>
				 					  </view>
				 					  <view class="image-item-right" >
				 					      <text class="title" @click="navToDetailPage(item)">{{item.title}}</text>
				 					      <view >
				 					  	      <text class="price">￥{{item.price}}</text>
				 					  	      <text class="sales">已售 {{item.sales}}</text>
				 							  <image src="../../static/tabbar/gouwuche1.png"  class="shoppingCar" @click="showTanchu(item)"  alt="购物车图标"></image>
				 					      </view>
				 					  </view>
				 				</view>
				 			</view>
				 			<uni-load-more :status="loadingType"></uni-load-more>
							<view class="msg" @touchmove.stop.prevent="moveHandle" :class="bolShow1?'block':'none'">
								<view class="msgContent" :class="bolShow1?'':'none1'">
									<text class="closeMsg" @click="closeMsg">X</text>
									<view class="msgTop">
									<image :src="msg.src" mode="scaleToFill" class="msgImg"></image>
									<view class="msgTopText">
										<text class="msgPrice">￥<text>{{msg.price}}</text></text>
										<text class="stock">库存{{msg.stock}}</text>
									</view>
									</view>
									
									<view class="norms">
										<text class="normsTitle">规格</text>
										<text class="normsText">{{msg.norms}}</text>
									</view>
									
									<view class="msgNumber">
										<text class="msgNum">数量</text>
										<view class="msgNumberRight">
											<text class="reduce" @click="reduce">-</text>
												<text class="num">{{number}}</text>
											<text class="add" @click="add">+</text>
										</view>
									</view>
									
									<view class="msgBottom">
										<text class="addCar">加入购物袋</text>
										<text class="buy">立即购买</text>
									</view>
								</view>
							</view>
				 </view>

			 </view>
		
		
		
</template>
	

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	
	export default {
		data() {
			return {
					searchData:[{id:1,name:'面膜'},{id:2,name:'水乳霜'},{id:3,name:'精华'},{id:4,name:'卸妆水'},{id:5,name:'粉底液'},{id:6,name:'彩妆'}],
								searchHistory:[{name:'aaa'}], 
								val:'',
												headerPosition:"fixed",
												headerTop:"80rpx",
												loadingType: 'more', //加载更多状态
												filterIndex: 0, 
												cateId: 0, //已选三级分类id
												priceOrder: 0, //1 价格从低到高 2价格从高到低
												goodsList: [],
												cateList: [],
												bolShow:false,
												bolShow1:false,
												msg:{'src':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553187020783&di=bac9dd78b36fd984502d404d231011c0&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201609%2F26%2F20160926173213_s5adi.jpeg','price':'99.9','stock':379,'norms':'3层12包9条装(无香)'},
												number:1,
			}
		},
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			
			this.loadData();
		}, 
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh'); 
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		methods: {
			// 添加减少数量
			reduce(){
				if(this.number>=1){
					this.number-=1;
				}
			},
			add(){
				
				if(this.number<=this.msg.stock){
					this.number+=1;
				}
			},
			//关闭弹窗
			closeMsg(){
				this.bolShow1=false;
			},
			// 切换显隐
			show(){
				this.bolShow=true;
			},
			search(){
				console.log('开始搜索');
			},
			// 点击热门搜索
			addSearch(e){
				this.val=e.currentTarget.dataset.a;
				this.show();
			},
			//加载商品 ，带下拉刷新和上滑加载
						async loadData(type='add', loading) {
							//没有更多直接返回
							if(type === 'add'){
								if(this.loadingType === 'nomore'){
									return;
								}
								this.loadingType = 'loading';
							}else{
								this.loadingType = 'more'
							}
							
							let goodsList = await this.$api.json('goodsList');
							if(type === 'refresh'){
								this.goodsList = [];
							}
							//筛选，测试数据直接前端筛选了
							if(this.filterIndex === 1){
								goodsList.sort((a,b)=>b.sales - a.sales)
							}
							if(this.filterIndex === 2){
								goodsList.sort((a,b)=>{
									if(this.priceOrder == 1){
										return a.price - b.price;
									}
									return b.price - a.price;
								})
							}
							
							this.goodsList = this.goodsList.concat(goodsList);
							
							//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
							this.loadingType  = this.goodsList.length > 20 ? 'nomore' : 'more';
							if(type === 'refresh'){
								if(loading == 1){
									uni.hideLoading()
								}else{
									uni.stopPullDownRefresh();
								}
							}
						},
						//筛选点击
						tabClick(index){
							if(this.filterIndex === index && index !== 2){
								return;
							}
							this.filterIndex = index;
							if(index === 2){
								this.priceOrder = this.priceOrder === 1 ? 2: 1;
							}else{
								this.priceOrder = 0;
							}
							uni.pageScrollTo({
								duration: 300,
								scrollTop: 0
							})
							this.loadData('refresh', 1);
							uni.showLoading({
								title: '正在加载'
							})
						},
						//点击购物车图标，弹出底部蒙版层
						showTanchu(item){
							console.log(item.title+item.price+item.sales);
							this.msg={src:item.image,price:item.price,stock:item.sales,norms:item.title}
							this.bolShow1=true;
						},
						
						//详情
						navToDetailPage(item){
							//测试数据没有写id，用title代替
							let id = item.title;
							uni.navigateTo({
								url: `/pages/product/product?id=${id}`
							})
						},
						stopPrevent(){},
						  moveHandle(){
						          
						            }
					
		},
		components:{
		uniLoadMore
		}
	}
</script>

<style lang='scss'>
	page{background: #fff;}
.search-box{background: #FFFFFF;height: 80rpx;left: 0;position: fixed;top: 0;width: 100%;z-index: 300;}
	.category-search{align-items: center;background: #f7f7f7;border-radius: 50rpx;display: flex;height: 60rpx;line-height:60rpx;width: 94%;margin: 10rpx 3%;justify-content: space-between;}
	.category-search-img{width: 40rpx;height: 40rpx;margin: 10rpx 20rpx;}
	.category-search-text{color: #8b8b8b;font-size: 26rpx;height: 60rpx;line-height: 60rpx;}
	.category-search-input{color: #8b8b8b; border-radius: 50rpx;height: 60rpx;line-height: 60rpx;font-size: 26rpx;width: 90%;text-indent: 10rpx;padding:0 10rpx;}
	.category-search-text1{color: #c8c8c8;font-size: 30rpx;}
	/* 热门搜索 */
		.search-keyword{background: #fff;height: 130rpx;margin: 110rpx  3% 0 3%;width: 94%;}
		.leftBorder{width: 10rpx;background: #1c2ab1;height: 30rpx;line-height: 40rpx;display: inline-block;}
		.search-title{font-size: 30rpx;line-height: 40rpx;height: 40rpx;padding-left: 20rpx;display: inline-block;background: #fff;position: relative;}
		.search-list-text{background: #f7f7f7;border-radius: 30rpx;color: #373737;font-size:26rpx;float: left;height: 50rpx;line-height: 50rpx;padding: 0 20rpx;margin: 10rpx 20rpx;}
	/* 搜索结果 */
	page, .result{background: #fff;}
		.result{padding-top: 96rpx;}
		.navbar{position: fixed;left: 0;top: var(--window-top);display: flex;width: 100%;height: 80rpx;background: #fff;box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);z-index: 10;.nav-item{flex: 1;display: flex;justify-content: center;align-items: center;height: 100%;font-size: 30rpx;color: $font-color-dark;position: relative;&.current{color: #3640a1;&:after{content: '';position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 60rpx;height: 0;border-bottom: 4rpx solid #3640a1;}}}
			.p-box{display: flex;flex-direction: column;.yticon{display: flex;align-items: center;justify-content: center;width: 30rpx;height: 14rpx;line-height: 1;margin-left: 4rpx;font-size: 26rpx;color: #888;&.active{color: $base-color;}}.xia{transform: scaleY(-1);}}}
	/*  商品列表 */ 
	.goods-list{ background: #ddd;display:flex;flex-direction: column;margin-top: 70rpx;}
	.goods-item{ background: #fff;display:flex;margin-top: 20rpx;padding:30rpx;width: 100%; }
	/* 商品图片 */ 
	.image-item-left{ height: 200rpx;margin-right: 20rpx;width: 200rpx; }
	.image-item-left image{ height: 200rpx;width: 200rpx;opacity: 1;}
	.image-item-right{ display: flex; flex: 2;flex-direction: column; height: 200rpx;justify-content: space-between;overflow: hidden;}
	/* 商品名 */ 
	.title{ color: #333; font-size: 30rpx;margin-top: 10rpx;}
	/* 单价 */ 
	.price{font-size: 28rpx;margin-right: 20rpx;}
	/* 销量 */
	.sales{color: #8b8b8b;font-size: 28rpx;}
	/* 购物车图标 */ 
	.image-item-right image{height: 40rpx;float: right;overflow: hidden;width: 40rpx;}
	/* 控制显隐效果 */
	.none{display: none;}
	.block{display: block;}
	/* 底部弹出框 */
	.msg{height: 100%;width: 100%;background: rgba(0,0,0,0.5);position: fixed;bottom: 0;left: 0;z-index: 1000;}
	.msgContent{background: #ffffff;border-top-right-radius: 5%;border-top-left-radius: 5%; height: 37.5%;width: 100%;position: absolute;left: 0;bottom: 0;padding: 40rpx;animation: show 1s linear;}
	@keyframes show{from {height: 0;}to {height:37.5%;}}
	@keyframes hide{from {height: 37.5%;}to {height:0;}}
		.closeMsg{font-size: 30rpx;color: #a6a6a6;float: right;display: block;}
		.msgTop{display: flex;align-items: flex-end;justify-content: space-between;width: 32%;margin-bottom: 20rpx;}
		.msgImg{width: 100rpx;height: 100rpx;display: inline-block;}
		.msgTopText{display: flex;flex-direction: column;}
		.msgTopText{color: #d56b6f;} 
		.msgPrice text{font-size: 35rpx;}
		.stock{font-size: 15rpx;color: #cfcfcf;}
		.normsTitle{font-size: 30rpx;color: #343434;display: block;font-weight: bold;margin-bottom: 20rpx;}
		.normsText{width: 34%;height: 50rpx;border: 4rpx #242d88 solid;border-radius: 30rpx;text-align: center;background: #e7e9f6;display: block;color: #4b539b;font-size: 20rpx;line-height: 40rpx;margin-bottom: 30rpx;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;padding: 0 10rpx;}
		.msgNumber{display: flex;width: 100%;justify-content: space-between;margin-bottom: 40rpx;}
		.msgNum{font-size: 30rpx;color: #343434;font-weight: bold;}
		.msgNumberRight{width: 25%;height: 40rpx;border-radius: 20rpx;border: 2rpx #f7f7f7 solid;text-align: center;line-height: 40rpx;display: flex;justify-content: space-between;align-items: center;}
		.add,.reduce{width: 40rpx;border-radius: 40%;height: 40rpx;font-size: 20rpx;background: #f7f7f7;line-height: 40rpx;}
		.num{font-size: 28rpx;color: #333333;height: 40rpx;line-height: 40rpx;}
		.msgBottom{display: flex;}
		.msgBottom text{width: 50%;height: 70rpx;line-height: 70rpx;text-align: center;color: #fff;font-size: 30rpx;}
		.addCar{background: #1f1f1f; border-radius: 0;border-top-left-radius: 40rpx;border-bottom-left-radius: 40rpx;}
		.buy{background: #1c2ab1; border-radius: 0;border-top-right-radius: 40rpx;border-bottom-right-radius: 40rpx;}
		.none1{animation: hide 1s ease-in-out;}
</style>
